<template>
  <div id="app" ref="appRef">
    <header ref="headerRef">
      <p
        class="title"
        :class="{ activeStyle: activeIndex === index }"
        v-for="(item, index) in titleArr"
        :key="index"
        @click="onClick(item)"
      >
        {{ item.title }}
      </p>
    </header>
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeIndex: +sessionStorage.getItem("activeIndex") || 0,
      titleArr: [
        {
          id: 0,
          title: "地图",
          path: "/map",
        },
        {
          id: 1,
          title: "图表",
          path: "/echart",
        },
        {
          id: 2,
          title: "列表",
          path: "/list",
        },
        // {
        //   id: 2,
        //   title: "地图",
        //   path: "/list",
        // },
      ],
    };
  },
  computed: {
    key() {
      return this.$route.path;
    },
  },
  components: {},
  methods: {
    onClick(item) {
      if (item.id !== this.activeIndex) {
        this.activeIndex = item.id;
        this.$router.push(item.path);
        sessionStorage.setItem("activeIndex", this.activeIndex);
        // console.log("router", this.$router);
      }
    },
  },
  watch: {
    $route: {
      handler(value) {
        this.$nextTick(() => {
          if (value.path === "/map") {
            this.$refs["appRef"].style.setProperty(
              "background-image",
              `url(${require("@/assets/images/map/app-bg.jpg")})`
            );

            this.$refs["headerRef"].style.setProperty("color", `#fff`);
          } else {
            this.$refs.appRef.style.setProperty("background-image", "unset");
            this.$refs["headerRef"].style.setProperty("color", `#000`);
          }
        });
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // background-image: url("@/assets/images/map/app-bg.jpg");
  color: #2c3e50;
  height: 100vh;
}
header {
  width: 100%;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(6, 100px);
  text-align: center;

  & > p {
    position: relative;
  }
  & > p:hover {
    cursor: pointer;
  }
  & > p.activeStyle::before {
    content: "";
    display: block;
    width: 50%;
    height: 2px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    background: orange;
  }
}
</style>
